<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML 标签</title>
    <#include "/include/common.ftl">
    <link rel="stylesheet" href="/assets/lib/input4/css/jquery.bigautocomplete.css" type="text/css"/>
    <script type="text/javascript" src="/assets/lib/input4/js/jquery.bigautocomplete.js"></script>
    <script type="text/javascript">
        $(function ($) {
            $("#btnOne").one("click", function () {
                alert("执行一次没有了");
            });

            //获取按键编码
            $("#keyEvent").keyup(function (e) {
                var keycode = e.which;
                alert(keycode);
            });

            //文本框搜索
            $("#inputKeyword").bigAutocomplete({
                width: 604,
                max: 20,
                url: "search.htm",
                callback: function (data) {
                    alert(data.title + data.id);
                }
            });

            //清除上传的文件名
            $("#fileClear").click(function () {
                var obj = document.getElementById('txtFile') ;
                obj.outerHTML=obj.outerHTML;
            });
        });

        var html = {
            //启用/禁用
            aDisabled: function (obj) {
                if ($(obj).hasClass("disabled")) {
                    return;
                }
                $(obj).addClass("disabled");

                $.ajax({
                    type: "POST",
                    url: "/htmlElement/ajax.htm",
                    data: "name=John",
                    dataType: "json",
                    success: function (msg) {
                        //服务器返回不成功，启用
                        if (msg.code == '1') {
                            $(obj).removeClass("disabled");
                        }
                        alert(36);
                    },
                    error: function () {
                        $(obj).removeClass("disabled");
                    }
                });
            }
        }
    </script>
</head>
<body>
<div class="col-md-12">
    <table class="table table-bordered">
        <tr>
            <td>标签事件</td>
            <td>效果</td>
            <td>说明</td>
        </tr>
        <tr>
            <td>jquery one(type,[data],fn)</td>
            <td><a href="javascript:;" id="btnOne">只执行一次</a></td>
            <td>...</td>
        </tr>
        <tr>
            <td>通过添加属性控制，禁用/启用</td>
            <td><a href="javascript:;" onclick="html.aDisabled(this)">执行</a></td>
            <td>在异步提交时，点的过快，可以会重复提交,通过禁用就可以避免</td>
        </tr>
        <tr>
            <td>按键编码</td>
            <td><input type="text" id="keyEvent"></td>
            <td>获取当前按键的编码</td>
        </tr>
        <tr>
            <td>文件上传</td>
            <td><input type="file" id="txtFile">
                <input type="button" id="fileClear" value="删除">
            </td>

            <td>获取当前按键的编码</td>
        </tr>
    </table>
</div>
<form class="form-horizontal" action="tree.ftl" onkeydown="if(event.keyCode==13){return false;}">
    <div class="form-group">
        <label class="col-sm-2 control-label">关键字</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="inputKeyword">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">回车提交</label>
        <div class="col-sm-5">
            <input type="text" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label"></label>
        <div class="col-sm-5">
    <p>表单默认任意文本框回车都会提交，在表单添加事件阻止回车提交</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</body>
</html>